<template>
	<view class="geryTheme">
		<page-title Theme="geryTheme" class="cal">图书详情</page-title>
		<view class="flex align-center py-2 cal" style="height: 249rpx;">
			<image :src="currentBook.imgurl" mode="aspectFill" lazy-load class="flex-1 mx-2 rounded"
				style="width: 249rpx;height: 210rpx;"></image>
			<view class="flex-2 mx-2">
				<view style="font-size: 45rpx;"> {{currentBook.name}} </view>
				<view class="font mt-1"> 作者: {{currentBook.author}} </view>
				<view class="flex align-center mt-2">
					<button class="flex-1 mx-2"> 分享 </button>
					<button class="flex-1 mx-2" @tap="collectThisBook"> {{collectStatus?'已收藏':'收藏'}} </button>
				</view>
			</view>
		</view>
		<view class="shadow bg-white">
			<tab-top :tabArr="['详情', '目录']" :tabIndex="tabIndex" @changeTabIndex="changeTabIndex" class="cal"></tab-top>
			<!-- 具体内容 -->
			<swiper :style="{height: `${calHeight}rpx`}" :current="tabIndex" @change="swiperChangeIndex">
				<!-- 详情 -->
				<swiper-item>
					<scroll-view scroll-y :style="{height: `${calHeight}rpx`}">
						<view>
							<view class="py-2 flex justify-center text-light-black">——简介——</view>
							<view class="px-2 font-lg" style="line-height: 80rpx;"> {{currentBook.synopsis}} </view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 目录 -->
				<swiper-item>
					<scroll-view scroll-y :style="{height: `${calHeight}rpx`}">
						<block v-for="item in chapterCatalog" :key="item.id">
							<view hover-class="bg-light" class="p-2 text-ellipsis border-bottom"
								@tap="toReadingPage(item.id)"> {{item.title}} </view>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	let currentBookId,
		collectedBooks = getApp().globalData.collectedBooks
	import test from '@/common/test'
	import pageTitle from '@/components/pageTitle.vue'
	import tabTop from '../../components/tabTop.vue'
	import unit from '@/common/unit'
	export default {
		data() {
			return {
				calHeight: 0,
				tabIndex: 0,
				collectStatus: false,
				currentBook: {
					name: '', // 小说名字
					author: '', // 作者名字
					synopsis: '', // 小说简介
					imgurl: ''
				},
				chapterCatalog: [] // 小说目录
			}
		},
		components: {
			pageTitle,
			tabTop
		},
		methods: {
			// 获取tab栏的index
			changeTabIndex(tabIndex) {
				this.tabIndex = tabIndex
			},
			swiperChangeIndex(e) {
				this.tabIndex = e.detail.current
			},
			// 获取目录的id
			toReadingPage(id) {
				uni.navigateTo({
					url: `/pages/reading/reading?chapterId=${id}`
				})
			},
			collectThisBook() {
				this.collectStatus = !this.collectStatus
				uni.showToast({
					icon: 'none',
					title: this.collectStatus ? '已收藏' : '取消收藏成功'
				})
				if (this.collectStatus) {
					collectedBooks.push(this.currentBook)
				} else {
					let index = collectedBooks.findIndex(item => item.id === currentBookId)
					collectedBooks.splice(index, 1)
				}
			}
		},
		async onLoad(e) {
			currentBookId = Number(e.bookId)
			let {
				list
			} = await this.$http.get('/book') // 获取图书介绍
			let {
				chapterCatalog
			} = await this.$http.get('/testSynopsis') // 获取图书目录
			this.currentBook = list.find(item => item.id === currentBookId)
			this.chapterCatalog = chapterCatalog
			// 获取当前图书是否收藏的标识
			let currentBook = collectedBooks.find(item => item.id === currentBookId)
			if (currentBook) {
				this.collectStatus = true
				return this.currentBook = currentBook
			}
		},
		mounted() {
			unit.calSurplusHeight({
				pageId: this,
				pos: 'cal',
				success: val => this.calHeight = val
			})
		}
	}
</script>

<style>

</style>
